<template>
  <div>
    <common-head title="商品列表" />
    <!-- search-bar -->
    <div class="search-bar">
      <div
        :class="['order', 'sale', {
        active: active.by === 'sale'
      }]"
        @click="orderBySale"
      >
        <span>销量</span>
        <div
          :class="['angle', 'top', {
          active:  active.by === 'sale' && active.order === 0
        }]"
        ></div>
        <div
          :class="['angle', 'bottom', {
          active:  active.by === 'sale' && active.order === 1
        }]"
        ></div>
      </div>
      <div
        :class="['order', 'price', {
        active: active.by === 'price'
      }]"
        @click="orderByPrice"
      >
        <span>价格</span>
        <div
          :class="['angle', 'top', {
          active:  active.by === 'price' && active.order === 0
        }]"
        ></div>
        <div
          :class="['angle', 'bottom', {
          active:  active.by === 'price' && active.order === 1
        }]"
        ></div>
      </div>
    </div>
    <!-- /search-bar -->
    <div class="content">
      <!-- 商品列表 -->
      <div class="item-lists">
        <div
          class="item"
          v-for="item in items"
          @click="clickItem(item.id)"
          :key="item.id"
        >
          <img :src="item.pic" alt />
          <p class="name">{{item.name}}</p>
          <div class="action">
            <span class="price">{{item.minPrice | currency}}</span>
            <van-icon class-prefix="icon" class="iconfont" name="jiaru" />
          </div>
        </div>
      </div>
      <!-- /商品列表 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from 'api'
import { currency } from 'utils/filters'
export default {
  data () {
    return {
      active: {
        by: 'sale', // 按照什么排序 sale price
        order: 1 // 0 升序  1 降序
      },
      orderBy: 'ordersDown',
      items: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    clickItem (id) {
      // 进入详情页
      this.$router.push(`/detail/${id}`)
    },
    orderBySale () {
      if (this.active.by === 'price') {
        this.active.order = 1
        // 按照 销量 降序
        this.orderBy = 'ordersDown'
      } else {
        if (this.active.order === 1) {
          this.active.order = 0
          // 销量 升序
          this.orderBy = 'ordersUp'
        } else {
          this.active.order = 1
          this.orderBy = 'ordersDown'
        }
      }
      this.active.by = 'sale'
      this.fetchItems()
    },
    orderByPrice () {
      if (this.active.by === 'sale') {
        this.active.order = 0
        // 价格 升序
        this.orderBy = 'priceUp'
      } else {
        if (this.active.order === 1) {
          this.active.order = 0
          this.orderBy = 'priceUp'
        } else {
          this.active.order = 1
          this.orderBy = 'priceDown'
        }
      }
      this.active.by = 'price'
      this.fetchItems()
    },
    fetchItems () {
      // 获取商品列表
      fetchItems({
        k: this.$route.query.word,
        orderBy: this.orderBy
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    }
  },
  filters: {
    currency
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 86px;
}
.search-bar {
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #666;
  position: fixed;
  left: 0;
  top: 46px;
  font-size: 12px;
  color: #333;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  .order {
    &.active {
      color: #f66;
    }
    position: relative;
    .angle {
      width: 0;
      height: 0;
      border: 6px solid transparent;
      position: absolute;
      right: -17px;
      &.top {
        border-bottom-color: #333;
        top: -4px;
        &.active {
          border-bottom-color: #f66;
        }
      }
      &.bottom {
        border-top-color: #333;
        top: 11px;
        &.active {
          border-top-color: #f66;
        }
      }
    }
  }
}

.item-lists{
  display: flex;
  flex-wrap: wrap;
  .item{
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px;

    img{
      width: 80%;
      display: block;
      margin: 0 auto;
    }
    .name{
      font-size: 12px;
      font-weight: bold;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .action{
      color:#f66;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }
  }
}
</style>
